<template>
	<el-card v-if="topic" :header="topic.analysis.title">
		<el-form label-width="250px">
			<template v-for="item in topic.analysis.key" :key="item.key">
				<el-form-item v-if="item.content">
					<template v-slot:label>
						<div>
							<span>{{ item.title }}：</span>
							<el-tag size="small" effect="dark">{{ item.key }}</el-tag>
						</div>
					</template>
					<el-image hide-on-click-modal v-if="item.type === 'img'" style="width: 100px;cursor: pointer;" :src="item.content" :preview-src-list="[item.content]"></el-image>
					<el-rate
						style="line-height: 2.5"
						v-else-if="item.type === 'rate'"
						v-model="item.content"
						disabled
						text-color="#ff9900">
					</el-rate>
					<p v-else v-html="item.content"></p>
				</el-form-item>
			</template>

<!--			<el-form-item v-if="topic.knowledge">
				<template v-slot:label>
					<div>
						<span>知识点类型：</span>
						<el-tag size="small" effect="dark">knowledge</el-tag>
					</div>
				</template>
				<p v-html="topic.knowledge"></p>
			</el-form-item>
			<el-form-item v-if="topic.technics">
				<template v-slot:label>
					<div>
						<span>技巧类型：</span>
						<el-tag size="small" effect="dark">technics</el-tag>
					</div>
				</template>
				<p v-html="topic.technics"></p>
			</el-form-item>
			&lt;!&ndash;				<el-form-item>
								<template #label>
									<div>
										<span>难度星级：</span>
										<el-tag size="small" effect="dark">difficulty</el-tag>
									</div>
								</template>
								<el-rate disabled v-model="topic.difficulty"></el-rate>
							</el-form-item>&ndash;&gt;
			<el-form-item v-if="topic.keywords">
				<template v-slot:label>
					<div>
						<span>关键字：</span>
						<el-tag size="small" effect="dark">keywords</el-tag>
					</div>
				</template>
				<p v-html="topic.keywords"></p>
			</el-form-item>
			<el-form-item v-if="topic.assuredKeywords">
				<template v-slot:label>
					<div>
						<span>确定关键字：</span>
						<el-tag size="small" effect="dark">assuredKeywords</el-tag>
					</div>
				</template>
				<p v-html="topic.assuredKeywords"></p>
			</el-form-item>
			<el-form-item v-if="topic.knackDetail">
				<template v-slot:label>
					<div>
						<span>技巧细节：</span>
						<el-tag size="small" effect="dark">knackDetail</el-tag>
					</div>
				</template>
				<p v-html="topic.knackDetail"></p>
			</el-form-item>
			<el-form-item v-if="topic.knackKeyword">
				<template v-slot:label>
					<div>
						<span>技巧关键字：</span>
						<el-tag size="small" effect="dark">knackKeyword</el-tag>
					</div>
				</template>
				<p v-html="topic.knackKeyword"></p>
			</el-form-item>
			<el-form-item v-if="topic.knackImgUrl">
				<template v-slot:label>
					<div>
						<span>技巧图片：</span>
						<el-tag size="small" effect="dark">knackImgUrl</el-tag>
					</div>
				</template>
				<el-image style="width: 100px;cursor: pointer;" :src="topic.knackImgUrl" :preview-src-list="[topic.knackImgUrl]"></el-image>
			</el-form-item>
			<el-form-item v-if="topic.knackVoiceTxt">
				<template v-slot:label>
					<div>
						<span>技巧：</span>
						<el-tag size="small" effect="dark">knackVoiceTxt</el-tag>
					</div>
				</template>
				<p v-html="topic.knackVoiceTxt"></p>
			</el-form-item>
			<el-form-item v-if="topic.conciseExplain">
				<template v-slot:label>
					<div>
						<span>浅解析：</span>
						<el-tag size="small" effect="dark">conciseExplain</el-tag>
					</div>
				</template>
				<p v-html="topic.conciseExplain"></p>
			</el-form-item>
			<el-form-item v-if="topic.explain">
				<template v-slot:label>
					<div>
						<span>深解析：</span>
						<el-tag size="small" effect="dark">explain</el-tag>
					</div>
				</template>
				<p v-html="topic.explain"></p>
			</el-form-item>
			<el-form-item v-if="topic.illiteracyExplain">
				<template v-slot:label>
					<div>
						<span>盲答解析：</span>
						<el-tag size="small" effect="dark">illiteracyExplain</el-tag>
					</div>
				</template>
				<p v-html="topic.illiteracyExplain"></p>
			</el-form-item>-->
		</el-form>
	</el-card>
</template>

<script>
import { defineComponent } from 'vue'
export default defineComponent({
	name: 'laAnalysis',
	props: ['topic']
})
</script>

<style scoped>

</style>
